<template>
  <div class="home overflowY">
    <div class="PageContent" v-loading="loading">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="homeRuleForm"
        :rules="rules"
        class="demo-ruleForm"
        :disabled="saveFlag"
        @submit.native.prevent
      >
        <div class="PageItem margintop20">
          <el-row class="paddingleft2em">
            <el-form-item label="寄存编号" style="margin-bottom: 0">
              <el-input
                v-model="businessCode"
                ref="homebusinessCode"
                @keyup.enter.native="searchData"
                :maxlength="20"
                placeholder="请输入业务编码"
              >
                <el-button
                  type="primary"
                  slot="append"
                  icon="el-icon-search"
                  @click="searchData"
                ></el-button>
              </el-input>

              <el-button type="primary" :disabled="saveFlag">扫描</el-button>
<!--              <el-button type="primary" :disabled="saveFlag">选择</el-button>-->
            </el-form-item>
          </el-row>
        </div>
        <DepositInformationDisplay :ruleForm="ruleForm" />
        <div class="PageItem">
          <el-row class="PageInfo">
            <i class="info-bar"></i>选择要带出祭奠骨灰/排位信息</el-row
          >
          <el-row class="paddingleft2em">
            <el-checkbox-group v-model="depositDeadIds">
              <el-checkbox
                :label="item.id"
                v-for="item in ruleForm.depositDeadItems"
                :key="item.id"
                >{{ item.deadName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-row>
          <el-row
            class="paddingleft2em"
            style="position: relative; height: 30px"
          >
            <el-button
              type="primary"
              style="position: absolute; left: 0; right: 0; margin: auto"
              @click="Save('1')"
              :disabled="saveFlag"
              >确认带出祭奠</el-button
            >
          </el-row>
        </div>

        <div class="PageItem">
          <el-row class="PageInfo">
            <i class="info-bar"></i>已带出祭奠骨灰/排位信息</el-row
          >
          <el-row class="paddingleft2em">
            <el-checkbox-group v-model="Takenouts">
              <el-checkbox
                :label="item.id"
                v-for="item in Takenout"
                :key="item.id"
                >{{ item.deadName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-row>
          <el-row
            class="paddingleft2em"
            style="position: relative; height: 30px"
          >
            <el-button
              type="primary"
              style="position: absolute; left: 0; right: 0; margin: auto"
              @click="Save('2')"
              :disabled="saveFlag"
              >确认带出祭奠返回</el-button
            >
          </el-row>
        </div>

        <DepositFee
          :tableData="this.tableData"
          :businessCode="this.ruleForm.businessCode"
          :dbid="this.ruleForm.dbId"
          @input="tableData = $event"
        />
        <el-row
          class="PageItem"
          :gutter="30"
          style="text-align: right; margin: 30px 0"
        >
        </el-row>
      </el-form>
    </div>
    <div style="width: 0px; height: 0px; overflow: hidden">
      <object id="view1" type="application/x-eloamplugin" name="view"></object>
    </div>
    <div id="idCardContainer"></div>
  </div>
</template>

<script>
import * as Type from "@/api/service";
import { dataFormate, dataFormatetmd } from "@/utils/index";
import DepositInformationDisplay from "@/components/DepositInformationDisplay";
import DepositFee from "@/components/DepositInformationDisplay/DepositFee";
// import {provinceCityCounty} from '@/utils/provinceCityCounty'
// import GPY_S620A3XR from '@/api/GPY_S620A3XR'
// import { getLodop } from "@/utils/lodopFuncs";
import IdCard from "@/api/IdCard_SS628_100_001U";
import { mapGetters } from "vuex";
export default {
  name: "home",
  props: {
    //自定义模板清除属性
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    DepositInformationDisplay,
    DepositFee,
  },
  data() {
    return {
      dialogVisible: false, //格位弹框
      dialogTableVisible: false, //寄存费用弹框
      loading: false,
      btnPermisson: {}, //输入业务编码

      value: true,
      form: {
        //弹框表单
      },
      depositDeadIds: [],
      Takenout: [],
      Takenouts: [],
      ruleForm: {
        businessCode: "",
        //寄存位置
        depositTypeCode: "", //寄存类型code
        depositType: "", //寄存类型
        positionName: "", //寄存位置
        remark: "", //备注
        depositCaseId: "", //寄存格位id
        //寄存联系人
        familyName: "",
        certificateType: "",
        certificateNo: "",
        familyGenderCode: "",
        familyAge: "",
        familyPhone: "",
        familyAddress: "",
        DepositLocation: {},
        DepositContact: {},
        //寄存骨灰信息
        depositDeadItems: [],
        //寄存信息
        startDate: "",
        endDate: "",
        renewUnit: "string",
        renewNumber: 0,
        itemCharge: 0,
      }, //按钮权限
      btnRight: {
        btnBusinessCodeScanning: false,
        btnAddFuneralBusiness: false,
        btnReadDeadIdentityCard: false,
        btnReadFamilyMemberIdentityCard: false,
        btnReadFamilyAgentIdentityCard: false,
        btnSaveFuneralBusiness: false,
        btnSaveJumpServiceNegotiation: false,
        btnPhotoArchival: false,
        btnPrintQRCode: false,
      }, //业务编码
      businessCode: "",
      rules: {},
      dictionary: {}, //字典
      copydictionary: {}, //用于检索拼音

      modify: true, //新增时为true
      new_photolimit: false, //新增时为true
      streetlist: [], //街道列表
      villagelist: [], //村列表
      saveFlag: false, //保存过程中不可更改,true为正在保存
      //省市区县数据

      agetype: 1, //年龄类型
      ageWeizhiFlag: 0,
      cremationType: 0, //遗体类型
      photoBtnlimt: false, //初次保存前，“拍照备案”和“打印逝者二维码”按钮禁用
      onpresscTime: 0, //  阻止短时间内连续点击
      timeint: null,

      tableData: [],
    };
  },
  created() {
    //读取路由传过来的参数,优先启用参数传过来的
    let code = this.$route.params.businessCodeParam;
    if (code != null) {
      this.businessCode = code;
      this.ReadData();
    } else if (this.$store.getters.businessCode) {
      this.businessCode = this.$store.getters.businessCode;
      this.ReadData();
    }
  },
  mounted() {
    //按钮权限
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] =
        this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
    }
    //加载洽谈员
    // this.loaduserwithtypecode();
    // 初始化高拍仪设备
    //GPY_S620A3XR.camera.load();
    //加载数据字典
    //没有数据，加载数据
    this.$store
      .dispatch("user/getdictionary")
      .then((res) => {
        //获取字典数据
        this.dictionary = res;
        this.copydictionary = JSON.parse(JSON.stringify(this.dictionary));
        this.$set(this.dictionary, res);
        //获取未知的code
        if (
          this.copydictionary.age_type &&
          this.copydictionary.age_type.length
        ) {
          this.copydictionary.age_type.forEach((item) => {
            if (item.dataText == "未知") {
              this.ageWeizhiFlag = item.dataCode;
            }
          });
        }
        /*判断遗体类型*/
        if (
          this.copydictionary.cremation_type &&
          this.copydictionary.cremation_type.length
        ) {
          this.copydictionary.cremation_type.forEach((item) => {
            if (item.dataText.indexOf("遗体") > -1) {
              this.cremationType = item.dataCode;
            }
          });
        }
      })
      .catch(() => console.log("promise catch err"));
    //加载省市区县数据
    // this.loadprovince();
    //点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。
    //这种比较耗性能，暂时想不到其他的，能实现效果了。
    this.timeint = setInterval(function () {
      var arry = document.querySelectorAll(".el-cascader-node__label");
      for (var n = 0; n < arry.length; n++) {
        var item = arry[n];
        item.onclick = function () {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      }
    }, 1000);
    // 新语法hook代码更简洁，相当于下面   beforeDestroy  的逻辑
    this.$once("hook:beforeDestroy", () => {
      if (this.timeint) {
        clearInterval(this.timeint);
      }
    });
  },
  computed: {
    //计算
  },
  // beforeDestroy() {
  //   // GPY_S620A3XR.camera.unload();
  //   if (this.timeint) {
  //     console.log('清除定时器')
  //     clearInterval(this.timeint);
  //   }
  // },
  methods: {
    // -------弹框相关函数------------------
    determine(e) {
     
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      
    },
    clearSelection() {
     
      if (this.title === "寄存费用新增") {
        this.$refs.multipleTable.clearSelection();
        this.dialogTableVisible = false;
      } else {
        this.dialogTableVisible = false;
      }
    },
    newExpenses(express) {
      if (express === "add") {
        this.dialogTableVisible = true;
        this.title = "寄存费用新增";
      } else {
        this.dialogTableVisible = true;
        this.title = "寄存修改";
      }
    },
    // ---------------------------------------
    age(type) {
      let nametype;
      if (this.copydictionary.age_type && this.copydictionary.age_type.length) {
        this.copydictionary.age_type.forEach((item) => {
          if (item.dataCode == type) {
            nametype = item.dataText;
          }
        });
        this.ruleForm.funeralDead.deadAge = "";
        if (nametype == "未知") {
          this.ruleForm.funeralDead.deadAge = "未知";
        }
      }
    },

    street_search() {
      this.$message("接口完善中");
      //this.ruleForm.funeralDead.provinceId = "济南"
    },
    //去掉左右空格
    trim(str) {
      if (str == null) {
        return "";
      }
      return str.replace(/^\s*(.*?)[\s\n]*$/g, "$1");
    },

    //数据读取
    ReadData() {
      let this_read = this;
      let postData = {
        businessCode: this_read.businessCode,
      };
      this.loading = true;
      Type["LoadDepositRegisterWithBusiness"](postData).then((response) => {
        const { data } = response;
        if (!data) {
          this.loading = false;
          this_read.$message(response.message);
          return;
        }
        this.ruleForm = data;
        this.ruleForm.depositDeadItems = [];
        this_read.$store
          .dispatch("user/setbusinessCode", this_read.businessCode)
          .catch(() => console.log("promise catch err"));
        this.loading = false;
      });

      Type["loadDepositMemorial"](postData).then((response) => {
        const { data } = response;
        if (!data) {
          this.loading = false;
          this_read.$message("数据读取失败");
          return;
        }

        this.ruleForm.depositCaseId = data.depositBusinessItem.depositCaseId;

        this.ruleForm.depositDeadItems = data.depositDeadItems;

        this.Takenout = this.ruleForm.depositDeadItems.filter(
          (item) => item.depositStateCode === 3
        );
        var sb = new Set(this.Takenout);
        this.ruleForm.depositDeadItems = this.ruleForm.depositDeadItems.filter(
          (x) => !sb.has(x)
        );

        this.loading = false;
      });

      Type["loadDepositCharges"](postData).then((response) => {
        const { data } = response;
        if (!data) {
          this.loading = false;
          this.$message("数据读取失败");
          return;
        }

        data.depositRenewItems.forEach((item) => {
          if (item.asSettled) {
            item.asSettled = "已结算";
          } else {
            item.asSettled = "未结算";
          }
        });
        this.tableData = data.depositRenewItems;
      });
    },
    searchData() {
      if (!this.businessCode) {
        this.$message("请输入业务编码");
        return;
      }
      //去除左右空格
      this.businessCode = this.trim(this.businessCode);
      this.ReadData();
    },
    //新增逝者火化档案
    AddInfo() {
      this.ruleForm = JSON.parse(JSON.stringify(this.copyruleForm));
      /*省市区县显示标志*/
      this.modify = true;
      /*拍照，打印显示标志*/
      this.new_photolimit = true;
      this.businessCode = "";
      this.$store
        .dispatch("user/setbusinessCode", this.businessCode)
        .catch(() => console.log("promise catch err"));
      // this.loadprovince();
    },

    //逝者信息保存方法
    Save(route) {
      //验证非空
      if (Date.now() - this.onpresscTime > 2000) {
        this.onpresscTime = Date.now();
      } else {
        return;
      }

      this.saveFlag = true;
      if (route === "1") {
        let postData = {
          businessCode: this.ruleForm.businessCode,
          depositDeadIds: this.depositDeadIds,
          depositCaseId: this.ruleForm.depositCaseId,
        };

        Type["saveDepositMemorialOut"](postData).then((response) => {
          // console.log(response)
          this.saveFlag = false;
          const { data } = response;
          if (response.code) {
            this.saveFlag = false;
            this.$message(response.message);
            this.depositDeadIds = [];
            this.ReadData();
            return;
          } else {
            this.saveFlag = false;
            this.$message(response.message);
          }
        });
      } else {
        let DepositMemorialOutInData = {
          businessCode: this.ruleForm.businessCode,
          depositDeadIds: this.Takenouts,
          depositCaseId: this.ruleForm.depositCaseId,
        };
        Type["saveDepositMemorialIn"](DepositMemorialOutInData).then(
          (response) => {
            this.saveFlag = false;
            // console.log(response)
            const { data } = response;
            if (response.code) {
              this.saveFlag = false;
              this.$message(response.message);
              this.Takenouts = [];
              this.ReadData();
              return;
            } else {
              this.saveFlag = false;
              this.$message(response.message);
            }
          }
        );
      }
    },

    PhotoArchival() {
      this.$router.push("PhotoArchival");
    }, //打印逝者二维码

    //拼音检索开始
    //拼音或中文检索
    PinyinMatchnation(val) {
      if (val) {
        let result = [];
        this.dictionary.nation.filter((item) => {
          if (item.dataTextAbbr.indexOf(val) != -1) {
            result.push(item);
          } else if (item.dataText && item.dataText.indexOf(val) != -1) {
            result.push(item);
          }
          this.copydictionary.nation = result;
        });
      } else {
        this.copydictionary.nation = JSON.parse(
          JSON.stringify(this.dictionary.nation)
        );
      }
    },
  },
  watch: {
    /*省市*/
    "ruleForm.funeralDead.provinceId"() {
      if (this.$refs.refHandle) {
        this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
      }
    },
    dictionary() {
      let dicData = this.dictionary;
      this.dictionary = dicData;
      this.copydictionary = JSON.parse(JSON.stringify(dicData));
    },
    "ruleForm.funeralDead.townId"() {
      if (this.ruleForm.funeralDead.townId) {
        this.loadvillage();
      }
    },
    businessCodeParam() {
      if (this.businessCodeParam) {
        this.searchData();
      }
    },
  },
};
</script>
<style>
/*.cascader .el-form-item__label{*/
/*width: 9vw!important;*/
/*}*/
.cascader .el-input,
.cascader .select .el-input {
  width: 25.6vw !important;
  min-width: 40px;
}

.lineheight label {
  line-height: 20px !important;
  letter-spacing: 3px;
}

.streetwidth,
.streetwidth input,
.streetwidth .el-input,
.streetwidth .el-select {
  width: 7vw !important;
  min-width: 120px !important;
}

.agewidth,
.agewidth input,
.agewidth .el-input {
  width: 5vw !important;
  min-width: 90px !important;
  overflow: hidden;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.PageContent .zm .el-input,
.PageContent .zm .el-select {
  width: 25.6vw;
  min-width: 40px;
}

.marginbottom0 .el-form-item {
  margin-bottom: 0px;
}
.home .el-textarea__inner {
  line-height: 2;
  min-height: 70px !important;
}
.home .el-select .el-input__inner {
  cursor: pointer;
  padding-right: 2px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<style scoped>
.home {
  color: #606266;
}
.w1230 {
  width: 72.5vw !important;
  min-width: 40px !important;
}

.w425 {
  width: 25.6vw;
  min-width: 40px;
}
.w50 {
  width: 57vw;
  min-width: 40px;
}
.letter2 {
  letter-spacing: 5px;
}

.el-input__inner {
  border: none;
}
/*
.PageItem /deep/ .el-input__inner {
  border: 0px solid;
  background-color: #fff;
  color: #000;
} */
</style>
